<template>
  <v-card title="百分比堆叠条形图">
    <vcu-chart-bar :data="chartData" :settings="settings" />
  </v-card>
</template>

<script>
export default {
  name: 'percentage-stack-row',
  data() {
    return {
      chartData: {
        dimensions: {
          name: '渠道',
          data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序'].reverse(),
        },
        measures: [
          {
            name: 'PV',
            data: [36000, 28000, 24000, 20000, 12000, 6000].reverse(),
          },
          {
            name: 'UV',
            data: [28000, 22000, 18000, 14000, 8000, 2000].reverse(),
          },
        ],
      },
      settings: {
        direction: 'row',
        stack: {
          sum: ['PV', 'UV'],
        },
        // 开启百分比堆叠图模式
        percentage: true,
        // 设置X轴数字标签格式
        xAxisLabelType: ['percentage'],
        tooltipOptions: {
          formatter: function (params) {
            let [tar] = params
            const tooltipContent = params
              .map((v) => {
                return `${v.seriesName}：${(v.value[v.seriesIndex + 1] * 100).toFixed(2)} %`
              })
              .join('<br/>')
            return tar.name + '<br/>' + tooltipContent
          },
        },
      },
    }
  },
  methods: {},
  created() {},
}
</script>
<style lang="less" scoped>
</style>
